{% extends "./inc_base.html" %}
{% block content %}
<header class="mui-bar mui-bar-nav">
    <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <a href="/center/cart/index" class="mui-icon iconfont icon-cart"><span class="mui-badge">{% if controller.cart.num %}{{controller.cart.num}}{%else%}0{%endif%}</span></a>-->
    <h1 class="mui-title"><img src="/static/mobile/img/logo.png" ></h1>
    <a class="mui-icon iconfont icon-search mui-pull-right" href="/search"></a>
</header>
{% include "./inc_nav.html" %}
{% include "./inc_sliderbar.html" %}
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper list-content">
    <div class="mui-scroll">
        <!--数据列表-->
        <ul class="mui-table-view ">
            {%for v in list.data%}
            <!--如果有缩略图-->
            {%if v.cover_id >0%}
            {% if v.model_id == 5%}
            <li class="mui-table-view-cell mui-media">
                <a href="{{v.name|get_url(v.id)}}">


                    <h4 class="dotdot line2 margin-bottom-6">{{v.title}}</h4>


                    <div class="mui-row">
                        <div class="mui-col-sm-12 mui-col-xs-12">
                            <img class="list_img_holder" src="{{v.cover_id|get_pic('m=0,w=360')}}">
                        </div>
                    </div>
                    <p class="item_info">

                        <span class="src space">{{v.uid|get_nickname}}</span>
                        <span class="cmt space">评论&nbsp;2323</span>

                        <span class="time" >{{v.update_time|moment}}</span>

                    </p>

                </a>
            </li>
            {%else%}
            <li class="mui-table-view-cell mui-media">
                <a href="{{v.name|get_url(v.id)}}" >
                    <div class="mui-row">
                        <div class="mui-col-sm-8 mui-col-xs-8">

                            <h4 class="dotdot line2 ">{{v.title}}</h4>
                            <p class="item_info">

                                <span class="src space">{{v.uid|get_nickname}}</span>
                                <span class="cmt space">评论&nbsp;2323</span>

                                <span class="time" >{{v.update_time|moment}}</span>

                            </p>
                        </div>
                        <div class="mui-col-sm-4 mui-col-xs-4 ">
                            <img class="list_img_holder" src="{{v.cover_id|get_pic('m=1,w=123,h=82')}}" >

                        </div>
                    </div>
                </a>
            </li>
            {%endif%}
            {%elif v.pics%}
            {% set pics = v.pics|strToArray%}
            {% if pics|length >2%}
            <li class="mui-table-view-cell mui-media">
                <a href="{{v.name|get_url(v.id)}}">
                    <h4 class="dotdot line2 margin-bottom-6">{{v.title}}</h4>
                    <p style="color: #e93b3d;min-width: 40px;margin-bottom: 0" class="mui-ellipsis">
                        <em pri="{{v.price}}" style="font-size: 10px;font-style: normal;" >¥ <span style="font-weight: 400;font-size: 18px;">{{v.price|get_price_format('1')}}</span></em>
                    </p>
                    <div class="mui-row">
                        <div class="mui-col-sm-4 mui-col-xs-4">
                            <img class="list_img_holder" src="{{pics[0]|get_pic('m=1,w=123,h=82')}}">
                        </div>
                        <div class="mui-col-sm-4 mui-col-xs-4">
                            <img class="list_img_holder" src="{{pics[1]|get_pic('m=1,w=123,h=82')}}">
                        </div>
                        <div class="mui-col-sm-4 mui-col-xs-4 ">
                            <img class="list_img_holder" src="{{pics[2]|get_pic('m=1,w=123,h=82')}}" >

                        </div>
                    </div>
                    {#
                    <p class="item_info">

                        <span class="src space">{{v.uid|get_nickname}}</span>
                        <span class="cmt space">评论&nbsp;2323</span>

                        <span class="time" >{{v.update_time|moment}}</span>

                    </p>
                     #}
                </a>
            </li>
            {%else%}
            <li class="mui-table-view-cell mui-media">
                <a href="{{v.name|get_url(v.id)}}" >
                    <div class="mui-row">
                        <div class="mui-col-sm-4 mui-col-xs-4 ">
                            <img class="list_img_holder" src="{{pics[0]|get_pic('m=1,w=300,h=300')}}" >
                        </div>
                        <div class="mui-col-sm-8 mui-col-xs-8">

                            <h4 class="dotdot mui-ellipsis-2 " style="margin-bottom:10px">{{v.title}}</h4>
                            {#
                            <p class="item_info">
                                <span class="src space">{{v.uid|get_nickname}}</span>
                                <span class="cmt space">评论&nbsp;2323</span>
                                <span class="time" >{{v.update_time|moment}}</span>
                            </p>
                            #}
                            <p style="color: #e93b3d;min-width: 40px;margin-bottom: 0" class="mui-ellipsis">
                                <em pri="{{v.price}}" style="font-size: 10px;font-style: normal;" >¥ <span style="font-weight: 400;font-size: 18px;">{{v.price|get_price_format('1')}}</span></em>
                            </p>
                        </div>

                    </div>
                </a>
            </li>
            {%endif%}
            {%else%}
            <!--无图-->
            <li class="mui-table-view-cell mui-media">
                <a href="{{v.name|get_url(v.id)}}">
                    <h4 class="dotdot line2 margin-bottom-6">{{v.title}}</h4>

                    <p class="item_info">

                        <span class="src space">{{v.uid|get_nickname}}</span>
                        <span class="cmt space">评论&nbsp;0</span>

                        <span class="time" >{{v.update_time|moment}}</span>

                    </p>

                </a>
            </li>
            {%endif%}
            {%endfor%}


        </ul>
    </div>
</div>
<script type="text/template" id="tpl">
    {% raw %}
    <%_.forEach(data,function(v,k){ %>
    <!--如果有缩略图-->
    <%if (v.cover_id){%>

    <% if (v.model_id == 5){%>
    <li class="mui-table-view-cell mui-media">
        <a href="<%=v.url%>">


            <h4 class="dotdot line2 margin-bottom-6"><%=v.title%></h4>


            <div class="mui-row">
                <div class="mui-col-sm-12 mui-col-xs-12">
                    <img class="list_img_holder" src="<%=v.cover_id%>">
                </div>
            </div>
            <p class="item_info">

                <span class="src space"><%=v.uid%></span>
                <span class="cmt space">评论&nbsp;2323</span>

                <span class="time" title="2016-08-30 11:06"><%=v.update_time%></span>

            </p>

        </a>
    </li>
    <%}else{%>
    <li class="mui-table-view-cell mui-media">
        <a href="<%=v.url%>" >
            <div class="mui-row">
                <div class="mui-col-sm-8 mui-col-xs-8">

                    <h4 class="dotdot line2 "><%=v.title%></h4>
                    <p class="item_info">

                        <span class="src space"><%=v.uid%></span>
                        <span class="cmt space">评论&nbsp;2323</span>

                        <span class="time" title="2016-08-30 11:06"><%=v.update_time%></span>

                    </p>
                </div>
                <div class="mui-col-sm-4 mui-col-xs-4 ">
                    <img class="list_img_holder" src="<%=v.cover_id%>" >

                </div>
            </div>
        </a>
    </li>
    <%}%>
    <%}else if(v.pics){%>
    <% if (v.pics.length >2){%>
    <li class="mui-table-view-cell mui-media">
        <a href="<%=v.url%>">
            <h4 class="dotdot line2 margin-bottom-6"><%=v.title%></h4>
            <p style="color: #e93b3d;min-width: 40px;margin-bottom: 0" class="mui-ellipsis">
                <em pri="<%=v.price%>" style="font-size: 10px;font-style: normal;">¥ <span style="font-weight: 400;font-size: 18px;"><%=v.price%></span></em>
            </p>
            <div class="mui-row">
                <div class="mui-col-sm-4 mui-col-xs-4">
                    <img class="list_img_holder" src="<%=v.pics[0]%>">
                </div>
                <div class="mui-col-sm-4 mui-col-xs-4">
                    <img class="list_img_holder" src="<%=v.pics[1]%>">
                </div>
                <div class="mui-col-sm-4 mui-col-xs-4 ">
                    <img class="list_img_holder" src="<%=v.pics[2]%>" >

                </div>
            </div>


        </a>
    </li>
    <%}else{%>
    <li class="mui-table-view-cell mui-media">
        <a href="<%=v.url%>" >
            <div class="mui-row">
                <div class="mui-col-sm-4 mui-col-xs-4 ">
                    <img class="list_img_holder" src="<%=v.pics[0]%>" >

                </div>
                <div class="mui-col-sm-8 mui-col-xs-8">

                    <h4 class="dotdot line2 margin-bottom-10"><%=v.title%></h4>
                    <p style="color: #e93b3d;min-width: 40px;margin-bottom: 0" class="mui-ellipsis">
                        <em pri="<%=v.price%>" style="font-size: 10px;font-style: normal;">¥ <span style="font-weight: 400;font-size: 18px;"><%=v.price%></span></em>
                    </p>
                </div>

            </div>
        </a>
    </li>
    <%}%>
    <%}else{%>
    <!--无图-->
    <li class="mui-table-view-cell mui-media">
        <a href="<%=v.url%>">
            <h4 class="dotdot line2 margin-bottom-6"><%=v.title%></h4>

            <p class="item_info">

                <span class="src space"><%=v.uid%></span>
                <span class="cmt space">评论&nbsp;0</span>

                <span class="time" title="2016-08-30 11:06"><%=v.update_time%></span>

            </p>

        </a>
    </li>
    <%}%>
    <%})%>
    {% endraw %}
</script>
{% endblock%}

{% block script %}
<script>

    //console.log();
    var tplRender =  _.template(document.getElementById("tpl").innerHTML);
    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            down: {
                callback: pulldownRefresh
            },
            up: {
                contentrefresh: '正在加载...',
                callback: pullupRefresh
            }
        }
    });
    mui("#sliderSegmentedControl").on("tap","a.mui-control-item",function(){
        var url = this.getAttribute("data-url");
        //打开关于页面
        //alert(url)
        mui.openWindow({
            url: url
        });
    })
    mui("#pullrefresh .mui-table-view").on("tap","li.mui-table-view-cell > a",function(){
        var url = this.getAttribute("href");
        //打开关于页面
        mui.openWindow({
            url: url
        });
    })
    var tops=parseInt(sessionStorage.getItem("{{ctx.url}}_top"))>0?0:parseInt(sessionStorage.getItem("{{ctx.url}}_top"));
    var size=parseInt(sessionStorage.getItem("{{ctx.url}}_size"))||0;
    //记录位置
    window.onscroll = function () {

        var patt1 = /\(.*?\)/;
        var srtY = document.querySelector('#pullrefresh .mui-scroll').style.transform || document.querySelector('#pullrefresh .mui-scroll').style["-webkit-transform"];
        if (srtY) {
            var Y = parseInt(srtY.match(patt1)[0].split(",")[1])
        } else {
            var Y = 0;
        }
        console.log(Y)
        var S = document.querySelector('#pullrefresh .mui-table-view').querySelectorAll('li.mui-table-view-cell').length;
        console.log(Y);
        if (window.sessionStorage) {
            sessionStorage.setItem("{{ctx.url}}_top", Y);
            sessionStorage.setItem("{{ctx.url}}_size", S);
        }
    }
    /**
     * 下拉刷新具体业务实现
     */
    function pulldownRefresh() {
        setTimeout(function() {
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
            window.location.reload();
        }, 1000);
    }
    /**
     * 上拉加载具体业务实现
     */
    function pullupRefresh() {
        setTimeout(function() {

            var table = document.body.querySelector('#pullrefresh .mui-table-view');
            var cells = document.body.querySelectorAll('#pullrefresh .mui-table-view-cell');
            var count = "{{list.count}}";
            console.log((parseInt(count) > cells.length));

            if(parseInt(cells.length) < parseInt(count)){
                createFragment(10)
                mui('#pullrefresh').pullRefresh().endPullupToRefresh();
            }else {
                mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
            }

        }, 1000);
    }
    var createFragment = function(count, page) {
        //无限加载
        var table = document.body.querySelector('#pullrefresh .mui-table-view');
        var lastIndex = table.querySelectorAll('li.mui-table-view-cell').length;
        console.log(lastIndex);
        var pages = page || Math.ceil((lastIndex+count)/count);
        console.log(pages);
        mui.ajax("{{ctx.url}}",{
            data:{
                page:pages
            },
            dataType:'json',//服务器返回json格式数据
            type:'get',//HTTP请求类型
            success:function(data){
                $('#pullrefresh .mui-table-view').append(tplRender(data));
                //获得服务器响应
//                console.log();
//             var fragment = document.createDocumentFragment();
//                var li;
//                for (var i = 0; i < data.data.length; i++) {
//                    li = document.createElement('li');
//                    li.className = 'mui-table-view-cell';
//                    li.innerHTML ='<a href="javascript:;">'+
//                            '<img class="mui-media-object mui-pull-right" src="/static/mobile/img/yuantiao.jpg">'+
//                            '<div class="mui-media-body">'+
//                            data.data[i].title+
//                            '<p class="mui-ellipsis">静静的看这个世界，最后终于疯了</p>'+
//                            '</div>'+
//                            '</a>';
//                    fragment.appendChild(li);
//                }
                //console.log($(tplRender(data)));
                //document.getElementById("tpl").innerHTML= tplRender(data)

            }
        });

    };

    mui.ready(function() {

        //mui('#pullrefresh').pullRefresh().pullupLoading();

        var page = Math.ceil(size/10);
        if(page>1 ){
            for (var i = 1; i < (page+1); i++) {
                createFragment(10,(i+1))
            }
        }
        mui('#pullrefresh').pullRefresh().scrollTo(0,tops);
        //alert(1)
        console.log()
//            $('header').on('doubleTap',function () {
//                alert(3)
//            })
        document.querySelector('header h1').addEventListener('tap',function () {
            //内容区滚动到顶部
            mui('#pullrefresh').pullRefresh().scrollTo(0,0,100);
        });
        var btn = document.querySelectorAll(".mui-bar-tab a.mui-tab-item");
        for(var i = 0;i<btn.length;i++){
            btn[i].addEventListener("tap",function () {
                var href = this.getAttribute("href");
                if(href=="#wait"){
                    //todo
                    mui.toast("功能开发中。。。")
                    return
                }
                mui.openWindow({url: href})

            })
        }
    });


</script>

{% endblock %}
